<template>
  <div class="home">
    <home-header class="home-header" :city="city"></home-header>
    <home-swiper :swiperList="swiperList"></home-swiper>
    <home-catalog></home-catalog>
    <home-hot 
    :hotPriseList="hotPriseList"
    :hotContentList="hotContentList"
    :hotRightList="hotRightList"
    ></home-hot>
    <home-weekend :weekendSwiperList="weekendSwiperList"></home-weekend>
    <home-guess :guessList="guessList"></home-guess>
  </div>
</template>

<script>
import axios from 'axios'
import homeHeader from './components/homeHeader'
import homeSwiper from './components/homeSwiper'
import homeCatalog from './components/homeCatalog'
import homeHot from './components/homeHot'
import homeWeekend from './components/homeWeekend'
import homeGuess from './components/homeGuess'
export default {
  name: 'Home',
  components:{
    homeHeader,
    homeSwiper,
    homeCatalog,
    homeHot,
    homeWeekend,
    homeGuess
  },
  data(){
    return {
      city:'',
      guessList:[],
      hotContentList:[],
      hotPriseList:[],
      hotRightList:[],
      swiperList:[],
      weekendSwiperList:[]
    }
  },
  methods:{
    getHomeData(){
      axios.get("/api/index.json")
            .then(this.getHomeDataSucc)
    },
    getHomeDataSucc(res){
      // console.log(res)
      res = res.data
      if(res.data){
        const data = res.data
        this.city=data.city
        this.guessList = data.guessList
        this.hotContentList = data.hotContentList
        this.hotPriseList = data.hotPriseList
        this.hotRightList = data.hotRightList
        this.swiperList = data.swiperList
        this.weekendSwiperList = data.weekendSwiperList
      }
    }
  },
  mounted(){
    this.getHomeData()
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="stylus" scoped>
.home
  position:relative
  .home-header
    position:fixed
    top:0
    left:0
    z-index:100
    width:100%
</style>
